<template>
  <div class="home">
    <van-row>
      <van-col span="24" class="top">
        <div class="logo">
          <h3>TPSH CHAT</h3>
        </div>
      </van-col>
      <van-col span="24" class="btn-box">
        <van-button class="btn-item" plain round type="info" @click="toRegister">注册</van-button>
      </van-col>
      <van-col span="24" class="btn-box">
        <van-button class="btn-item" round type="info" @click="toLogin">登录</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "Home",
  data() {
    return {};
  },
  methods: {
    ...mapActions(["asyncSaveToken"]),
    toLogin() {
      this.$router.push("/login");
    },
    toRegister() {
      this.$router.push("/register");
    }
  },
  created() {
    this.asyncSaveToken("");
  }
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  background-color: #ffffff;

  .top {
    width: 100%;
    height: 260px;
    background: url("~@/assets/bg.jpg") no-repeat;
    background-size: cover;

    .logo {
      height: 100px;
      margin-top: 140px;
      line-height: 100px;
      color: #ffffff;
      text-align: center;
    }
  }

  .btn-box {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 90px;
    line-height: 90px;
    text-align: center;

    .btn-item {
      width: 55%;
    }
  }
}
</style>